.checkbox-container {
	-webkit-app-region: no-drag;
	cursor: pointer;
	background-color: var(--background-modifier-border-hover);
	border-radius: var(--toggle-radius);
	display: inline-block;
	flex-shrink: 0;
	height: calc(var(--toggle-thumb-height) + var(--toggle-border-width) * 2);
	position: relative;
	user-select: none;
	-webkit-user-select: none;
	width: var(--toggle-width);
	box-shadow:
		inset 0 4px 10px rgba(0, 0, 0, .07),
		inset 0 0 1px rgba(0, 0, 0, .21);
	transition: 
		box-shadow .15s ease-in-out,
		outline .15s ease-in-out,
		border .15s ease-in-out,
		opacity .15s ease-in-out;
	outline: 0 solid var(--background-modifier-border-focus);

	
	input[type='checkbox'] {
		position: absolute;
		display: none;
		opacity: 0;
		left: 0;
		width: 100%;
		height: 100%;
		margin: 0;
		padding: 0;
		z-index: 10;
	}

	&:focus-within {
		outline: var(--toggle-border-width) solid var(--background-modifier-border-focus);
	}

	@media (hover: hover) {
		&:hover {
			box-shadow:
				inset 0 6px 20px rgba(0, 0, 0, .14),
				inset 0 0 1px rgba(0, 0, 0, .28);
		}
	}
	
	&.mod-small {
		--toggle-width: 34px;
		--toggle-thumb-width: 15px;
		--toggle-thumb-height: 15px;
	}

	&.is-enabled {
		background-color: var(--interactive-accent);

		&:after {
			transform: translate3d(calc(var(--toggle-width) - var(--toggle-thumb-width) - var(--toggle-border-width)), 0, 0);
		}

		&:active:after {
			left: -4px;
		}
	}

	&:before {
		content: '';
		display: block;
		position: absolute;
		top: 0;
		left: 0;
		bottom: 0;
		right: 0;
		opacity: 0;
	}

	&:after {
		pointer-events: none;
		content: '';
		display: block;
		position: absolute;
		background-color: var(--toggle-thumb-color);
		width: var(--toggle-thumb-width);
		height: var(--toggle-thumb-height);
		margin: var(--toggle-border-width) 0 0 0;
		border-radius: var(--toggle-thumb-radius);
		transition: transform .15s ease-in-out,
		width .1s ease-in-out,
		left .1s ease-in-out;
		left: 0;
		transform: translate3d(var(--toggle-border-width), 0, 0);
		box-shadow: 0 1px 2px rgba(0, 0, 0, .15);
	}

	&:active:after {
		width: calc(var(--toggle-thumb-width) + var(--toggle-border-width));
	}
}
